<template>
  <div class="cent w" :searchDetailda="searchDetailda">
    <el-dialog
      title="蓝马服务协议"
      :visible.sync="dialogVisible"
      width="700px"
      >
      <div class="resv" style="height: 500px;overflow-y:scroll">
        <p> 本协议由您与通过蓝马为您提供货运代理服务的供应商（以下简称“供应商”）缔结的协议，本协议具有合同效力。</p>
        <p> <label> 第一条</label>
          只要您同意本协议并选定蓝马提供货运代理服务的供应商进行下单交易，即表明您委托该供应商作为您的代理人代为办理有关铁路空运海运进出口货物的订舱事宜。若该供应商受理您的托单，即表明接受您的委托，您和该供应商同意并签署此协议，双方的权利义务关系受该协议调整与约束。
        </p>
        <p> <label> 第二条</label>
          您委托供应商代为办理订舱时，通过蓝马进行下单操作。您必须提供正确的货物资料（名称、标志、包数或件数、重量、装卸港口等），对于填写错误而导致的损失和责任，由您自行承担。

        </p>
        <p> <label> 第三条</label>
          您保证委托供应商代理订舱的货物符合中国、运输沿途及目的国各相关国家法律法规条例等规定，不存在误报、错报或漏报的情形。您应如实申报货物名称及其他信息，并承担未如实申报的全部责任。如果托运货物是危险品，您应该在托单上注明危险货物，并将中文品名、等级、UNNO.等信息向供应商申报，并依据相关规定适当包装。无论您是否进行了危险品申报，对由于危险货物所造成的一切损失和责任，均由您承担。
        </p>
        <p> <label>  第四条</label>
          您委托书内容如有更改，应尽量在启运之前将委托书内容更正情况书面通知供应商；供应商根据更正内容及时调整操作。如根据您原指令操作已经发生的费用和责任，由您全部承担。
        </p>
        <p> <label>   第五条</label>
          如果您委托供应商代理报关、报验时，应当根据贸易性质提供合法、正确、齐备的报关报检单证。若您提供的单证不全、有误，应及时补正，即使您已补正，若非由供应商故意造成的报关、报验不能、迟误等，一切损失和责任由您自行承担。

        </p>
        <p> <label>  第六条</label>
          若非因供应商原因造成的您货物不能订舱、出运迟延等，供应商不负责任，一切损失和责任由您自行负责。

        </p>
        <p> <label> 第七条</label>
          供应商作为您的代理人，应认真履行职责，为您提供优质服务，随时解答您提出的问题，并尽力解决。
        </p>
        <p> <label>  第八条</label>
          您委托供应商代为办理出口订舱等事宜，应当向供应商指定的蓝马支付报酬及运输费和其他费用。您和供应商约定，交付处理货运代理事务取得的单证以您支付相关费用为条件。您须了解，蓝马受供应商委托向您发放提单，同样享有此项权利。

        </p>
        <p> <label> 第九条</label>
          若您通过蓝马订舱拿到提单后需要改单的，或者有电放需求的您可以与供应商沟通，请求供应商为您解决问题。
        </p>
        <div>
          <p> <label>  第十条 </label>
            费用核对与支付
          </p>
          <p>  1、您需了解您和供应商之间须在蓝马进行费用的核对与确认。供应商在班列开后一天内将费用账单记录或上传到蓝马，您须在供应商记录或上传账单后一天内进行费用确认。
          </p>

          <p>   2、如果非供应商装箱，则您必须保证所装集装箱货物符合我国及其他国家的有关规定，否则对于由此给您所造成的一切损失和责任由供应商负责。
          </p>
          <p>   2、供应商委托蓝马向您收取费用。您在蓝马上确认运费和其他费用后应在约定时间内将款项付供应商指定的蓝马帐户。
          </p>
        </div>

        <p> <label> 第十一条</label>
          提单领取。您同意并授权蓝马代您向供应商领取提单，并且供应商委托蓝马向您交付提单，您无权直接向供应商请求交付提单。您有特殊事项须向供应商直接领取的，须事先取得蓝马的同意授权书并提交给供应商。您同意在您与蓝马间不存在其他协议约定的情况下，在您未付清所有费用至蓝马前，蓝马有权不向您交付提单。
        </p>
        <div>
          <p> <label>   第十二条  </label>
            特别约定：
          </p>
          <p>  1、您通过蓝马委托供应商代办货物的订舱、更正等事宜，供应商可将托单等文件下载或打印，蓝马系统记录资料以及下载件、打印件和复印件具有同等的法律效力。</p>

          <p>  2、如果非供应商装箱，则您必须保证所装集装箱货物符合我国及其他国家的有关规定，否则对于由此给您所造成的一切损失和责任由供应商负责。</p>
          <p>  3、如果您订舱的货物退关，您应及时将空箱返回原提箱点，否则，由此引起的滞箱费及其他损失和责任由您自行承担。</p>
          <p>  3、如果您订舱的货物退关，您应及时将空箱返回原提箱点，否则，由此引起的滞箱费及其他损失和责任由您自行承担。</p>
          <p>  4、如果您向供应商委托订舱的货物在运输过程中，被任何国家或地区的海关或其他有权机构扣留查验或因任何违法事宜被扣押、没收或无法正常清关并被提取以继续或完成运输，您将直接向供应商承担由此产生的一切损失和责任。</p>
          <p>  5、本协议中所称的“一切损失和责任”包括但不限于给协议方、第三方造成的损失，各种罚款，以及诉讼或仲裁费、律师费等抗辩的法律费用和差旅费等。</p>
        </div>

        <p> <label>  第十三条 </label>
         本协议从供应商通过蓝马确认受理您的托单时生效，有效期持续到您和供应商该笔订单交易业务的完全终结。
        </p>
        <p> <label>  第十四条  </label>
          若本协议发生争议，您和供应商之间应当友好协商解决，协商不成的，提交供应商所在地有管辖权的法院审理。
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <div class="listBox ">
      <div class="Box clearfix" :consignData="consignData">
        <div class="right card">
          <el-form :model="fromData" label-position="left" size="mini"  status-icon  ref="fromData" label-width="100px" class="demo-ruleForm" style="margin-right: 10px">
            <div class="list" style="border-bottom: 0px none;padding-bottom:0px">
              <!-- 标题--->
              <div class="title">
                <p class="clearfix">集装箱选择 <span class="add" v-show="chart.lcl != 1" @click="addList()"><span class="el-icon-circle-plus-outline"></span> 新增</span></p>
              </div>
              <div class="bottom itme" style="position: relative" v-for="(listData,index) in fromData.qParamRequests">
                <!-- 自备箱--->
                <div class="add2" style="" v-if="chart.lcl != 1 && index>0" @click="addList(index)"><span class="el-icon-delete"></span>删除</div>

                <el-form-item label="集装箱归属"  class="item" v-if="chart.lcl != 1" >
                  <el-select size="small" v-model="listData.ctnOwner" placeholder="请选择" style="width:215px" @change="changeRadio(listData)" >
                    <el-option
                      v-for="item in checked[index]"
                      :key="item.value"
                      :label="item.label"
                      :disabled="item.disabled"
                      v-show="item.none"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-radio-group v-model="listData.ctnOwner"  @change="changeRadio(listData)" style="position: absolute;top: 8px;left:115%;width: 250px">
                  <el-radio :label="1" v-if="listData.ctnOwner == 1 || listData.ctnOwner == 4  ">中铁</el-radio>
                  <el-radio :label="4" v-if="listData.ctnOwner == 1 || listData.ctnOwner == 4  ">俄铁</el-radio>
                  <el-radio :label="5" v-if="!(listData.ctnOwner == 1 || listData.ctnOwner == 4  )">大洋</el-radio>
                  <el-radio :label="2" v-if="!(listData.ctnOwner == 1 || listData.ctnOwner == 4  )">租箱</el-radio>
                  <el-radio :label="3" v-if="!(listData.ctnOwner == 1 || listData.ctnOwner == 4  )">买箱</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item
                              :prop="'qParamRequests.' + index + '.cartonType'"
                              :rules=" rules.cartonType" label="箱型"  class="item" v-if="chart.lcl != 1">

                    <el-radio-group v-model="listData.cartonType" @change="cartonTypeClick(listData)">
                      <span v-for="li in listData.cartonTypeList">
                        <el-radio-button  :disabled="!li.disabled" :label="li.label"></el-radio-button>
                      </span>
                  </el-radio-group>

                  <!--<el-radio-group v-model="listData.cartonType" @change="cartonTypeClick(listData)">-->
                    <!--<el-radio-button v-for="li in listData.cartonTypeList" :disabled="!li.disabled" :label="li.label"></el-radio-button>-->
                  <!--</el-radio-group>-->
                </el-form-item>

                <el-form-item label="箱量" :prop="'qParamRequests.' + index + '.cartonCount'"
                              :rules="rules.cartonCount" class="item" v-if="chart.lcl != 1" @change="saechFn(listData.cartonType,listData.weight)" >
                  <el-input-number   :disabled="!listData.cartonType" v-model="listData.cartonCount" @change="handleChange" :min="0" :max="1000" label="描述文字"style="width: 120px"></el-input-number>
                </el-form-item>

                <el-form-item label="重量" :prop="'qParamRequests.' + index + '.weight'"
                              :rules="rules.weight" class="item" >
                  <el-input  type="text" :disabled="chart.lcl!=1? !listData.cartonType:false" v-model="listData.weight" placeholder="重量" @change="saechFn(listData.cartonType,listData)"  >
                    <template slot="append">kg</template>
                  </el-input>
                  <p style="color: red;font-size: 12px;width: 350px">{{listData.err }}</p>
                </el-form-item>
                <el-form-item label="体积" :prop="'qParamRequests.' + index + '.volume'"
                              :rules="rules.volume" class="item" v-if="chart.lcl == 1">
                  <el-input  type="text"  v-model="listData.volume" placeholder="体积" @change="handleChange" >
                    <template slot="append">m³</template>
                  </el-input>
                  <p style="font-size: 12px;margin-top:10px;width: 300px" ><span>重量体积比：500kg = 1 </span> <span style="margin-left: 30px">RT为 {{listData.weight/500 >listData.volume ? Math.ceil(listData.weight/500) : listData.volume }}</span></p>
                </el-form-item>
                <!--<div v-show="chart.lcl != 1" class="itme clearfix">-->
                  <!--<div class="lable left">-->
                    <!--<p>集装箱归属</p>-->
                  <!--</div>-->
                  <!--<div class="input left clearfix" >-->
                    <!--<div class="lable left" style="text-align: left">-->
                      <!--<el-select size="small" v-model="fromData.checked[index]" placeholder="请选择" style="width:215px" @change="checkedFn(index)">-->
                        <!--<el-option-->
                          <!--v-for="item in checked[index]"-->
                          <!--:key="item.value"-->
                          <!--:label="item.label"-->
                          <!--:disabled="item.disabled"-->
                          <!--:value="item.value">-->
                        <!--</el-option>-->
                      <!--</el-select>-->
                    <!--</div>-->
                  <!--</div>-->
                  <!--<div class="input left" v-show="fromData.checked[index] ==1" style="line-height: 30px;text-align: left;width: 150px;padding-left: 10px" >-->
                    <!--<el-radio-group v-model="listData.ctnOwner"  @change="changeRadio(index)">-->
                      <!--<el-radio :label="2">租箱</el-radio>-->
                      <!--<el-radio :label="3">买箱</el-radio>-->
                    <!--</el-radio-group>-->
                  <!--</div>-->
                  <!--<div class="input left"  style="display: none">-->
                    <!--<el-radio-group v-model="listData.ctnOwner">-->
                      <!--<el-radio :label="1">铁路箱</el-radio>-->
                    <!--</el-radio-group>-->
                  <!--</div>-->
                <!--</div>-->
                <!-- 箱型--->
                <!--<div v-show="chart.lcl != 1" class="itme clearfix">-->
                  <!--<div class="lable left">-->
                    <!--<p>箱型</p>-->
                  <!--</div>-->
                  <!--<div class="input left cartonType">-->
                <!--<span  v-for="(list,index2) in cartonType[index]" >-->
                   <!--<el-button class="bot " size="mini"   :disabled="!list.disabled"  :class="{'check':list.value == cartonTypeCheck[index].type}" @click="cartonTypeClick(list.value,index)">-->
                   <!--{{list.value }}-->
                <!--</el-button>-->
                <!--</span>-->
                  <!--</div>-->
                <!--</div>-->
                <!-- 箱量--->
                <!--<div v-show="chart.lcl != 1" class="itme clearfix">-->
                  <!--<div class="lable left">-->
                    <!--<p>箱量</p>-->
                  <!--</div>-->
                  <!--<div class="input left">-->
                    <!--&lt;!&ndash;<el-input   v-model="fromData.cartonCount" placeholder="箱量"  size="small" > </el-input>&ndash;&gt;-->
                    <!--<el-input-number size="small"  :disabled="!cartonTypeCheck[index].type" v-model="listData.cartonCount" @change="handleChange" :min="0" :max="1000" label="描述文字"style="width: 120px"></el-input-number>-->
                  <!--</div>-->
                <!--</div>-->
                <!-- 重量--->
                <!--<div  class="itme clearfix">-->
                  <!--<div class="lable left">-->
                    <!--<p>重量</p>-->
                  <!--</div>-->
                  <!--<div class="input left">-->
                    <!--<el-input  type="text" :disabled="chart.lcl!=1? !cartonTypeCheck[index].type:false" v-model="listData.weight" placeholder="重量" @change="saechFn(listData.cartonType,listData.weight)" size="small" >-->
                      <!--<template slot="append">kg</template>-->
                    <!--</el-input>-->
                  <!--</div>-->
                <!--</div>-->
                <!-- 体积--->
                <!--<div v-show="chart.lcl == 1" class="itme clearfix">-->
                  <!--<div class="lable left">-->
                    <!--<p>体积</p>-->
                  <!--</div>-->
                  <!--<div class="input left">-->
                    <!--<el-input  type="text"  v-model="listData.volume" placeholder="体积" @change="handleChange" size="small" >-->
                      <!--<template slot="append">m³</template>-->
                    <!--</el-input>-->
                    <!--<p style="font-size: 12px;margin-top:10px"><span>重量体积比：500kg = 1 </span> <span style="margin-left: 30px">RT为 {{listData.weight/500 >listData.volume ? listData.weight/500 : listData.volume }}</span></p>-->

                  <!--</div>-->
                <!--</div>-->
                <!--<div v-show="chart.lcl == 1" class="itme clearfix">-->

                <!--</div>-->
              </div>
            </div>
            <div class="list" >
              <div class="title">
                <p>增值服务（可选）</p>
              </div>
              <div class="itme" v-if="chart.isRequiredConsign">
                <div  style="width: 324px">
                  <el-form-item label="提箱点"  prop="suitcasePointId" :rules="rules.suitcasePointId">
                    <el-select size="small" class="left" clearable  v-model="fromData.suitcasePointId" placeholder="提箱点" style="width: 100%;" @change="gitciytList()">
                      <el-option
                        v-for="item in suitcasePointData"
                        :key="item.suitcasePointName"
                        :label="item.suitcasePointName"
                        :value="item.suitcasePointId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <div class="itme clearfix">
                <div class="lable left">
                  <span class="reds" v-if="chart.isRequiredConsign">
*
                  </span>
                  <el-checkbox v-model="checked2"  @change="checked2 = chart.isRequiredConsign? true:checked2 ">拖车</el-checkbox>
                </div>
                <div class="input left clearfix"  style="width: 500px;">
                  <span class="left labelSpan" v-show="checked2" style="">装货点 </span>
                  <el-select v-show="checked2" size="small" class="left" clearable  v-model="fromData.province" placeholder="省" style="width:40%;margin: 5px 5px 5px 0px" @change="provinceChange()">
                    <el-option
                      v-for="item in provinceAndCitData"
                      :key="item.provinceName"
                      :label="item.provinceName"
                      :value="item.cityList">
                    </el-option>
                  </el-select>
                  <el-select v-show="fromData.province && checked2" size="small" class="left" clearable  v-model="fromData.city" placeholder="城市" style="width:40%;margin: 5px 5% 5px 0px" @change="cityChange()">
                    <el-option
                      v-for="item in CityDate"
                      :key="item.cityId"
                      :label="item.cityName"
                      :value="item.cityId">
                    </el-option>
                  </el-select>

                  <el-autocomplete style="width: 91%"
                                   v-if="fromData.city && !chart.isRequiredConsign && checked2"
                                   class="inline-input"
                                   size="small"
                                   v-model="fromData.consignName"
                                   :fetch-suggestions="querySearch2"
                                   value-key="consignName"
                                   value = 'consignId'
                                   placeholder="车站/车站代码"
                                   @select="handleSelect2"
                                   @blur="blur()"
                  ></el-autocomplete>
                </div>
                <div class="input left" v-show="tuoyunShow">
                  <!--<p v-show="tuoyunShow" style="line-height: 30px;color: #999">-->
                  <!--该线路不支持托运服务-->
                  <!--</p>-->
                </div>
                <div style="clear: both">
                  <el-form-item label="" v-if="fromData.province && chart.isRequiredConsign && checked2"  prop="consignId" :rules="rules.consignId">
                    <el-select  size="small"  clearable  v-model="fromData.consignId" placeholder="城市" style="width: 91%;margin: 5px 5% 5px 0px" @change="changeConsoin()">
                      <el-option
                        v-for="item in this.tuoyun"
                        :key="item.consignId"
                        :label="item.consignName"
                        :value="item.consignId">
                      </el-option>
                    </el-select>

                  </el-form-item>
                </div>
              </div>
              <div class="itme clearfix">
                <div class="lable left">
                  <el-checkbox v-model="checked3">派送</el-checkbox>
                </div>
                <div class="input left" v-show="checked3" style="width: 500px">
                  <el-input  type="text"  v-model="fromData.sendAddress" placeholder="派送地点" @change="handleChange" size="small" style="width: 91%">
                  </el-input>
                </div>
              </div>
            </div>
            <div :quotationData="quotationData" class="list">
              <div >
                <div class="title" :weight="weight">
                  <p>联系人信息（必填）</p>
                </div>
                <div class="itme" >
                  <el-form-item label="联系人" prop="cttName" :rules="rules.cttName"  class="item" >
                    <el-input  type="text" v-model="fromData.cttName" placeholder="联系人"  size="small" > </el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="cttPhone" :rules="rules.cttPhone" class="item" >
                    <el-input  type="text"  v-model="fromData.cttPhone" placeholder="手机号"  size="small" > </el-input>
                  </el-form-item>
                  <el-form-item label="品名" prop="goodsName" :rules="rules.goodsName"  class="item">
                    <el-input  type="text"  v-model="fromData.goodsName" placeholder="品名"  size="small" > </el-input>
                  </el-form-item>
                </div>
                <!--<div class="itme clearfix">-->
                  <!--<div class="lable left">-->
                    <!--<p>联系人</p>-->
                  <!--</div>-->
                  <!--<div class="input left">-->
                    <!--<el-input  type="text" v-model="fromData.cttName" placeholder="联系人"  size="small" > </el-input>-->
                  <!--</div>-->
                <!--</div>-->
                <!--<div class="itme clearfix" >-->
                  <!--<div class="lable left">-->
                    <!--<p>手机号</p>-->
                  <!--</div>-->
                  <!--<div class="input left">-->
                    <!--<el-input  type="text"  v-model="fromData.cttPhone" placeholder="手机号"  size="small" > </el-input>-->
                  <!--</div>-->
                <!--</div>-->
                <!--<div class="itme clearfix" style="padding-bottom: 30px">-->
                  <!--<div class="lable left">-->
                    <!--<p>品名</p>-->
                  <!--</div>-->
                  <!--<div class="input left">-->
                    <!--<el-input  type="text"  v-model="fromData.goodsName" placeholder="品名"  size="small" > </el-input>-->
                  <!--</div>-->
                <!--</div>-->

              </div>
              <div class="error" >
                <p> <span class="el-icon-warning" style="color: #ffc700"></span> 注意事项：</p>
                <p style="text-indent: 20px"> 1.危险品不在运输范围；2.超重货物可能将会无法运输；3.20尺柜需成对发运，柜差不得超过5吨；  </p>
                <p style="text-indent: 20px"> 4.部分有押运费线路，需要根据品名确认押运费；其他费用请
                  <span class="links" @click="showUser">
                  <img src="../../../../static/img/kefu.png" height="30" width="30" style="position: relative;top: 8px"/>
                 咨询客服
                </span> </p>
              </div>
              <div class="itme clearfix " style="padding-bottom: 30px">
                <p class="submit" > <el-checkbox v-model="checkbox" > </el-checkbox> 点击在线下单表示已阅读并同意免责条款<span class="links" @click="dialogVisible=!dialogVisible">《蓝马服务协议》</span></p>
                <div style="margin-top: 20px">
                  <!--<el-button   type="primary" @click="saechFn" style="width: 114px">开始询价</el-button>-->
                  <el-button type="primary" :disabled="!prceChart.quotationCount || !checkbox"  style="width: 114px" @click="addOder()">在线下单</el-button>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div :updateStatusData="updateStatusData" class="map">
          <div style="text-align: left;padding: 15px 0px">
            <el-switch
              v-model="prceChart.nuit"
              :width='width'
              style="font-size: 12px;color: #999"
              active-value="$"
              inactive-value="￥"
              active-color="#e1e1e1"
              active-text="$美元"
              inactive-text="￥人民币"
              inactive-color="#999" @change="clickROrD(prceChart.nuit)">
            </el-switch>
            <span  v-show="prceChart.reta" style="font-size: 14px;color: #999;margin-left: 10px">
              今日汇率 $1 = ￥{{parseFloat((prceChart.reta)).toFixed(2)}}
            </span>
          </div>
          <div class="money">
             <div class="title">
               <p class="clearfix"><span>费用</span>
                 <!--<el-button type="" size="mini" class="blu" @click="clickROrD('$')">$ 美元</el-button>-->
                 <!--<el-button type="" size="mini" class="blu" @click="clickROrD('￥')">￥ 人民币</el-button>-->
               </p>
             </div>
            <div class="con">
              <div >
                <el-popover
                  ref="popover5"
                  placement="bottom"
                  width='270'
                  trigger="hover"
                  v-model="visible2">
                  <div style="text-align:center; margin: 0;padding: 10px 10px 10px 10px">
                      <div class="alertList" v-for="list in prceList">
                         <p><span>{{list.ctnOwner}}:{{list.ctnType}} ×{{list.number?list.number:''}}</span> </p>
                         <p class="clearfix solid" v-show="list.ctnQuotationCount">
                           <span class="left">集装箱费用：</span>
                           <span class="right">{{prceChart.nuit}} {{prceChart.nuit=='￥'? list.ctnQuotationCount:list.ctnQuotationCountD}} </span>
                           </p>
                         <p class="clearfix solid">
                           <span class="left">  运输费: </span>
                           <span class="right">
                             {{prceChart.nuit}} {{prceChart.nuit=='￥'? list.lineQuotationCount:list.lineQuotationCountD}}
                           </span>
                         </p>
                      </div>
                  </div>
                </el-popover>
                <p style="position: relative" class="clearfix solid"  v-show="chart.lcl != 1" >
                      <span class="left">集装箱费用：</span>
                      <span class="right">{{prceChart.nuit}} {{prceChart.nuit=='￥'?prceChart.ctnQuotationCount:prceChart.ctnQuotationCountD}}</span>
                </p>
                <p class="clearfix solid" >
                  <span  class="left">运输费：</span>
                  <span class="right">{{prceChart.nuit}} {{prceChart.nuit=='￥'?prceChart.lineQuotationCount:prceChart.lineQuotationCountD}}</span></p>
                <span class="red" v-popover:popover5>
                   明细
                 </span>
              </div>
            </div>
          </div>
          <div class="money">
            <div class="title">
             <p > 增值费用</p>
            </div>
            <div class="con">
              <p class="clearfix solid" v-show="prceChart.consignQuotationCount"><span class="left">拖车费用 ：</span>

                <span class="right">{{prceChart.nuit}} {{prceChart.nuit=='￥'?prceChart.consignQuotationCount:prceChart.consignQuotationCountD}}</span></p>
              <p class="clearfix solid" v-show="prceChart.pettyPrice">
                <span class="left">站杂费 ：</span>

                <span class="right">{{prceChart.nuit}} {{prceChart.nuit=='￥'?prceChart.pettyPrice:prceChart.pettyPriceD}}</span></p>

            </div>
          </div>
          <div class="money">
            <div class="title">
              <p class="clearfix solid"><span style="font-weight: bold" class="left">合计费用 ：</span>
                <span style="color: #fd8d00" class="right">{{prceChart.nuit}} {{prceChart.nuit=='￥'? prceChart.quotationCount:prceChart.nuit=='$'?prceChart.quotationCountD:''}}  </span>
              </p>
              <p style="font-size: 12px;color: #999" v-show="chart.linePriceeEffectiveTime">当前报价有效期 ：{{chart.linePriceeEffectiveTime }} </p>
            </div>
          </div>

          <div class="money" :supportData="supportData">
            <div class="">
              <p class="title2" @click="showBox=!showBox"><span >费用说明</span> <span class="el-icon-arrow-down"></span></p>
              <!--<el-collapse-transition>-->
                <!--<div v-show="showBox">-->
                  <!--<p v-show="prceChart.remark">该线路有可能附带以下额外费用，详情请咨询客服</p>-->
                  <!--<p v-for="li in  prceChart.remark"> {{li}}</p>-->
                <!--</div>-->
              <!--</el-collapse-transition>-->
              <el-collapse-transition>
                <div v-show="showBox">

                  <div class="transition-box" >
                    <p v-for="li in  prceChart.remark"> {{li}}</p>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .labelSpan{font-size: 14px;line-height: 30px;margin-right: 10px}
  .cit{width: 25%;text-align: center;margin-left: 10px }
  .solid{ background:url("../../../../static/img/soile.png") repeat-x center}
  .solid span{background-color: #f2f7fa}
  .alertList{border-bottom: 1px solid #e1e1e1;}
  .alertList p{line-height: 30px;}
  .alertList p span{background-color: #fff}
 .item{width: 300px;text-align: left;position: relative}
  .resv p{ font-size: 12px;color: #999;line-height: 25px;margin-top: 10px}
  .resv label{ margin-top: 20px;font-weight: bold;font-size: 14px;color: #000}
  .blu{float: right;font-size: 12px;margin-left: 10px}
  .Box{position: relative;}
  .bot{border: 1px solid #c0c4cc;border-radius: 4px;margin-right: 10px;cursor: pointer;padding:10px 8px}
  .bot:hover{border: 1px solid #0062a2}
  .cartonType .check{border: 1px solid #0062a2}
  .links{text-decoration: underline;cursor: pointer;color: #0062a2;margin-left: 10px}
  .error{width: 100%;padding: 5px;box-sizing: border-box;border: 1px solid #fbd5a7;cursor: pointer}
  .transition-box{width: 100%;background-color: #f2f7fa;position:relative;}
  .title2{border-top: 1px solid #e1e1e1;padding-top: 10px;margin-top: 20px;color: #0d71b7}
  .title2 span{cursor: pointer}
  .submit{margin-top: 40px;}
  p{text-align: left;font-size: 14px;}
  .list{border-bottom: 1px solid #e1e1e1;padding:20px 0px;}
  .list p{font-size: 14px;}
  .card{width: 68.5%;margin-right: 31.5%;padding: 0px 0px ;background-color: #fcf9f9;border-top: 2px solid #e5e5e5}
  .card .title p{font-size: 20px;line-height: 45px}
  .card .title{margin-bottom: 20px;padding: 0px 15px}
  .card .lable{width: 100px;line-height: 30px}
  .card .lable p{line-height: 30px}
  .card .input{width: 215px;}
  .card .input input{width: 215px;}
  .card .itme{margin-bottom: 10px;position: relative;padding: 0px 15px;text-align: left}
  .add{color: #0d71b7;font-size: 12px;float: right;cursor: pointer;margin-right: 20px;}
  .add2{color: #0d71b7;font-size: 12px; margin-right: 20px;cursor: pointer;position: absolute;right: 20px;top: 10px;z-index: 100}
  .map{width: 30%;position: absolute;right: 0px;top: 0px;background-color: #f2f7fa;border-top: 2px solid #e5e5e5;box-sizing: border-box;padding: 20px 15px}
  .icon img{position: relative;top: 5px}
  .cent{padding-top: 40px}
  .money .title p{font-size: 20px;height: 40px;line-height: 40px}
  .money .con p{font-size: 14px;height: 35px;line-height: 35px}
  .money{margin-bottom: 10px}
  .money .title .lin{font-size: 14px}
  .lin{margin: 0px 10px}
  .lin2{display: none}
  .red{position: absolute;top: 80px;right: 10px;color: #fd8d00;cursor: pointer}
  .bottom{border-bottom: 1px solid #e1e1e1;padding-bottom: 20px;margin-top: 20px}
.reds{
  content: '*';
  color: #f56c6c;
}
  @media only screen and (min-width: 1200px){
    .lin{display: inline}
    .lin2{display: none}
  }
  @media only screen and (min-width: 1366px){
    .lin2{display: inline}
    .lin{display: none}
  }
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  import imgdeift from '../../../../static/img/icon/newsDeft.png'
  // import  Public from "../../../vuex/public";
  export default {
    name: 'my-adminChart',
    created () {
      this.$store.commit('commitBizDetails',null)
      this.$store.commit('commitfindLineQuotationSupport',null)
      this.$store.commit('commitQuotation',null)
      this.$store.commit('CommitFindConsign',null)
      var usr = sessionStorage.getItem('user');
      if(usr) {
        usr = JSON.parse(usr);
        this.user = usr
      }
      this.fromData.lineNumber = this.$route.query.id;
      var parm ={
        number:this.fromData.lineNumber
      }

      this.getLineDetail(parm)
      },
    data () {
     var wet = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('重量不能为空'));

       } else {
         if (value != parseInt(value)) {
           callback(new Error('重量只能填写数字'));
         }
         callback();
       };
     };
         var vam = (rule, value, callback) => {
           if (value === '') {
             callback(new Error('体积不能为空'));

           } else {
             if(value != parseInt(value) ){
               callback(new Error('体积只能填写数字'));
             }else{
               callback();
             }
           }
      };
      var cut = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('箱量不能为空'));
        } else {
          if(value <=0 ){
            callback(new Error('箱量不能为0'));
          }else{
            callback();
          }
        }
      }
      return {
        checkbox:false,
        CityDate:[],
        width:30,
        prceList:[],
        dialogVisible:false,
        visible2:false,
        dialogFormVisible:false,
        formLabelWidth:'40px',
        user:{
          type: -1
        },
        checked:[ [{
          value: 1,
          label: '铁路箱',
          none:true
        },{
          value: 4,
          label: '铁路箱',
          none:false
        },{
          value: 5,
          label: '自备箱',
          none:false
        },{
          value: 2,
          label: '自备箱',
          none:true
        },{
          value: 3,
          label: '自备箱',
          disabled: false,
          none:false
        }]],
        checked2:false,
        checked3:false,
        showBox:false,
        chart:{

        },
        cartonTypeCheck:[{type:''}],
        prceChart:{
          "quotationId":'',
          "escortFeeCount":0.00,// 押运费用
          "lineQuotationCount":0.00,//线路运输费用
          "ctnQuotationCount":0.00,//箱总价
          "consignQuotationCount":0.00,//拖车总价
          "quotationCount":0.00, // 询价结果
          "nuit":"$",
          linePriceeEffectiveTime:'',
          "escortFeeCountD":  0,// 押运费用
          "lineQuotationCountD": 0,//线路运输费用
          "ctnQuotationCountD": 0,//箱总价
          "consignQuotationCountD": 0,//拖车总价
          "quotationCountD": 0, // 询价结果
        },
        page:{
          page:1,
          pageSize: 10,
          count:0
        },
       fromData:{
         checked:[false],
         lineNumber:'',//单号
         type:1,
         cttName:"",//联系姓名
         cttPhone:"",//联系电话
         consignId:"",
         consignAddress:"",
         sendAddress:"",
         suitcasePointId:"",
         suitcasePointName:'',
         goodsName:"",//品名
         qParamRequests:[{
           ctnOwner:1,//是否租箱
           cartonType:'',//箱型
           cartonCount:null,//箱量
           weight:null,//重量
           volume:null,//体积
           cartonTypeList:[
             {
               value: '20GP',
               label: '20GP',
               disabled:false,
               wet:0
             }, {
               value: '40GP',
               label: '40GP',
               disabled:false,
               wet:0
             },{
               value: '40HQ',
               label: '40HQ',
               disabled:false,
               wet:0
             }
           ]
         }]
       },
        cartonType:[[{
          value: '20GP',
          label: '20GP',
          disabled:false,
          wet:0
        }, {
          value: '40GP',
          label: '40GP',
          disabled:false,
          wet:0
        },{
          value: '40HQ',
          label: '40HQ',
          disabled:false,
          wet:0
        }]],
        paisong: [{
          id: '20GP',
          name: '20GP',
        }],
        tuoyunShow:false,
        tuoyun: [{
          id: '20GP',
          name: '20GP'
        }],
        last:'',
        supportList:[],
        maxAndMin:'',
        results:false,
        maxWweight:[],
        rules:{
          cartonType:[
            { required: true, message: '请选择箱型', trigger: 'change'}
          ],
          cartonCount:[
            { required: true, message: '箱量不能为空', trigger: 'change'},
            { validator: cut, trigger: 'change' }
          ],
          weight:[
            { required: true, message: '重量不能为空', trigger: 'blur'},
            { validator: wet, trigger: 'blur' }
          ],
          volume:[
            { validator: vam, message: '体积不能为空', trigger: 'blur'},
          ],
          cttName:[
            { required: true, message: '联系人不能为空', trigger: 'blur'},
          ],
          goodsName:[
            { required: true, message: '品名不能为空', trigger: 'blur'},
          ],
          cttPhone:[
            { required: true, message: '手机号不能为空', trigger: 'blur'},
          ],
          suitcasePointId:[
          { required: true, message: '提箱地点不能为空', trigger: 'blur'},
        ],
          consignId:[
          { required: true, message: '拖车点不能为空', trigger: 'blur'},
        ],
          consignId2:[

          ],
        }
      }
    },
    methods: {
      ...mapActions({
        getLineDetail:'getLineDetail',//线路详情
        findConsign: 'findConsign',//支持门点
        addQuotation: 'addQuotation',//下单
        findQuotation:'findQuotation',//询价
        lognPost:'loginFn', // 登陆
        findLineQuotationSupport:'getLineQuotationSupport',//支持箱型报价
        getProvinceAndCity:'getProvinceAndCity',//支持城市
        getSuitcasePoint:'getSuitcasePoint',//提箱点
        findLineWeightConfine:'findLineWeightConfine' // 限重

      }),
      // 上下页
      handleCurrentChange (val) {
        this.page.page = parseInt(val)
        this.saechFn()
      },
      showUser(){
        this.$store.commit('commitUserShow', true)
      },
      // 选择城市 获取门点
      cityChange(value) {
        var parm = {
          cityId:this.fromData.city,
          originPort:this.chart.originPort,
          origin:this.chart.origin,
          suitcasePointId:this.fromData.suitcasePointId || ""
        }

        this.findConsign(parm)
      },
      // 获取提箱点
      suitcasePointsClick(value) {
        var parm = {
          originPort:this.chart.originPort||'',
          origin:this.chart.origin||''
        }
        this.getSuitcasePoint(parm)
      },
      provinceChange(value) {
         this.CityDate = this.fromData.province
      },
      handleChange(value) {
        this.saechFn()
      },
      blur(){
        this.fromData.consignId = ''
        if(this.fromData.consignName && !this.results){
          this.saechFn()
        }
      },
      querySearch2(queryString, cb) {
        var restaurants = this.tuoyun;
        var results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        if(results.length<=1){
         this.results = false
        }else {
          this.results = true
        }
        cb(results);
      },
      createFilter2(queryString) {
        return (restaurant ) => {
          // 先查
          var str = JSON.stringify(restaurant.consignName)
          return (str.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect2(item) {
        this.fromData.consignName = item.consignName
        this.fromData.consignId = item.consignId
        if(this.results){
          this.saechFn()
        }
      },
      //切换集装箱归属
      changeRadio(list){
        //
        list.cartonType = ''
        list.cartonCount = "",
        list.weight =   ""
        list.volume =   ""
        for(let i in list.cartonTypeList){
          // 重置

          list.cartonTypeList[i].disabled = false;
          for(let k in this.supportList){
          // 匹配相同有报价的箱型
                if((this.supportList[k].ctnType ==list.cartonTypeList[i].value) && (this.supportList[k].ctnOwner == list.ctnOwner)){
                  list.cartonTypeList[i].disabled = true;
                   }
              }
        }
        this.saechFn()
      },
      // 列表查询
      goChart(name,id){
        this.$router.push({ name: name,query:{id:this.$route.name,chartID:id}})
      },
      // 选择箱型
      cartonTypeClick(list){
        list.cartonCount = "",
        list.weight =   ""
        list.volume =   ""
        //this.$refs['fromData'].resetFields();
      },
      // 询价
      // 选择门点
      changeConsoin(){
        var dat = this.tuoyun
        if(!this.fromData.consignId){
          return
        }
        for (let i in dat){
          if(this.fromData.consignId == dat[i].consignId){
            // 记录consignId
            this.fromData.consignName = dat[i].consignName
            break
          }
        }
        this.saechFn()
      },
      saechFn(type,arry){
        if(type && arry){

          for(let i in  arry.cartonTypeList){
            if(arry.cartonTypeList[i].wet){

              if((arry.cartonTypeList[i].value == type) && arry.weight >= arry.cartonTypeList[i].wet * 1000){
                arry.err = '您的货物已经超重，可能会被收取超重费用或导致无法运输 详情请咨询客服人员'
                //this.openError("您的货物已经超重，可能会被收取超重费用或导致无法运输 详情请咨询客服人员")
                break
              }else {
                arry.err = ''
              }
            }
          }
        }
        var parm ={}
        // 查看当前有没有选择拖车地址
         if(!this.fromData.consignId){
           // 没有选拖车查看当前有没有输入拖车地址
          if(!this.fromData.consignName){
            // 没输入 ，默认 0
            this.fromData.consignId = ''
          }else {
            // 输入地址，但未选择，匹配数据源有没有当前输入的地址
            var dat = this.tuoyun
            for (let i in dat){
              if(this.fromData.consignName == dat[i].consignName){
                // 记录consignId
                this.fromData.consignId = dat[i].consignId
                break
              }
            }
          }
         }else {

         }
         // 区分拼箱和整箱
         if(this.chart.lcl == 1){
          // 拼箱询价
          if(!this.fromData.qParamRequests[0].volume || !this.fromData.qParamRequests[0].weight){
            return
          }
          parm ={
            lineNumber:this.fromData.lineNumber,//线路编号
            consignId:this.fromData.consignId,// 拖车地址id

            // suitcasePointId:this.fromData.suitcasePointId,
            paramRequests: [{
              volume:parseInt(this.fromData.qParamRequests[0].volume)||0,//体积
              weight:parseInt(this.fromData.qParamRequests[0].weight)||0,//重量
            }]
          }
        }else
          {
          // 整箱询价
          parm ={
            lineNumber:this.fromData.lineNumber,
            consignId:this.fromData.consignId,

            // suitcasePointId:this.fromData.suitcasePointId,
            paramRequests: []
          }

            for(let i in this.fromData.qParamRequests){
              if(this.fromData.qParamRequests[i].cartonType && this.fromData.qParamRequests[i].cartonCount){
                parm.paramRequests.push({
                  ctnOwner:this.fromData.qParamRequests[i].ctnOwner,//是否租箱
                  cartonType:this.fromData.qParamRequests[i].cartonType,//箱型
                  cartonCount:this.fromData.qParamRequests[i].cartonCount,//箱量
                  weight:this.fromData.qParamRequests[i].weight||0,//重量
                })
              }
            }
        }
        // 如果当前 没有拖车id 以及 有输入拖车地点 新加入拖车
        if(!this.fromData.consignId && this.fromData.consignName){
          parm.consignId = 0
        }

        // 清除vue底层数据
        this.$store.commit('commitQuotation',null)
        // 发送请求
        if(parm.paramRequests.length<=0){
          this.prceChart = {
            "quotationId":"",
            "escortFeeCount":0,// 押运费用
            "lineQuotationCount": 0,//线路运输费用
            "ctnQuotationCount":0,//箱总价
            "consignQuotationCount": 0,//拖车总价
            "quotationCount":0, // 询价结果
            pettyPrice: 0,
            cbm: 0,
            remark:"",
            nuit:'$',
            reta:"",
            pettyPriceD: 0,
            "escortFeeCountD": 0,// 押运费用
            "lineQuotationCountD": 0,//线路运输费用
            "ctnQuotationCountD": 0,//箱总价
            "consignQuotationCountD": 0,//拖车总价
            "quotationCountD": 0, // 询价结果
          }
          return
        }
        this.findQuotation(parm)
      },
      clickROrD(str){
        this.prceChart.nuit = str
      },
      //选择自备箱
      checkedFn(index){
        if(this.fromData.checked[index]){
          this.fromData.qParamRequests[index].ctnOwner = 2
          this.changeSupport(2,index)
        }else {
          this.fromData.qParamRequests[index].ctnOwner = 1
          this.changeSupport(1,index)
        }

      },
      addOder(){
        // 表单验证
        this.$refs['fromData'].validate((valid) => {
          if (valid) {
            if(!this.fromData.consignId){
              // 没有选拖车查看当前有没有输入拖车地址
              if(!this.fromData.consignName){
                // 没输入 ，默认 0
                this.fromData.consignId = ''
              }else {
                // 输入地址，但未选择，匹配数据源有没有当前输入的地址
                var dat = this.tuoyun
                for (let i in dat){
                  if(this.fromData.consignName == dat[i].consignName){
                    // 记录consignId
                    this.fromData.consignId = dat[i].consignId
                    break
                  }
                }
              }
            }
            var pu = this.fromData.qParamRequests
            var parm = {
              lineNumber:this.fromData.lineNumber,
              cttName:this.fromData.cttName,//联系姓名
              cttPhone:this.fromData.cttPhone,//联系电话
              goodsName:this.fromData.goodsName,
              consignSuitcasePoint:this.fromData.suitcasePointName,
              qParamRequests:[],
              sendAddress:this.fromData.sendAddress,
              consignId : this.fromData.consignId,
            }
            if(this.chart.lcl!=1){
              // 整箱报价 删除 体积
              for(let i in this.fromData.qParamRequests){
                parm.qParamRequests.push({
                  ctnOwner:this.fromData.qParamRequests[i].ctnOwner,//是否租箱
                  cartonType:this.fromData.qParamRequests[i].cartonType,//箱型
                  cartonCount:this.fromData.qParamRequests[i].cartonCount,//箱量
                  weight:this.fromData.qParamRequests[i].weight,//重量
                })
              }

            }else {
              // 拼箱报价删除 箱型箱量自备箱
              for(let i in this.fromData.qParamRequests){
                parm.qParamRequests.push({
                  volume:parseInt( this.fromData.qParamRequests[i].volume),
                  weight:parseInt(this.fromData.qParamRequests[i].weight),//重量
                })
              }
            }
            // 查看有无拖车信息
            if(this.fromData.consignName){
              // 查看有无拖车信息 有直接取id
              var province = this.fromData.province[0].provinceId,
                provinceDat = this.provinceAndCitData,
                provinceText = ''
              for(let i in  provinceDat){
                if(province == provinceDat[i].provinceId){
                  provinceText = provinceDat[i].provinceName
                }
              }
              parm.consignAddress = provinceText+ ' / '+ this.fromData.province[0].cityName+' / '+this.fromData.consignName
            }
            // 下单

            // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆

            this.addQuotation(parm)
            this.$store.commit('commitLoading', {loading:true,text:'正在创建订单，请稍后！'})
          } else {
            console.log('error submit!');
            return false;
          }
        });



      },
      // 列表解析
      searchDetailFn(res){
        res =res.body.data
        var origin = Public.publicLo.getCityById(res.origin),
          originPort= Public.publicLo.getCityById(res.originPort),
          customsStation = Public.publicLo.getCityById(res.customsStation),
          transitPort = Public.publicLo.getCityById(res.transitPort),
          dest =  Public.publicLo.getCityById(res.dest),
          departTime = 'yy-mm-dd',
          duration = '----天----小时';
        //
        if(origin){origin = origin.stationCN}
        if(originPort){originPort = originPort.stationCN}
        if(customsStation){customsStation = customsStation.stationCN}
        if(transitPort){transitPort = transitPort.stationCN}

        if(dest){dest = dest.stationCN}
        if(res.departTime){
          departTime = Public.publicLo.timeCheng(res.departTime).ymd
        }
        if(res.lcl==1){
          this.fromData.cartonType = ""

        }else {

        }
        if(res.duration){
          duration = Public.publicLo.timeCheng(res.duration).ymd
        }
        this.chart={
          id:res.id,
          "number":res.number,//路线编号
          "transMode":res.transMode,//运输模式
          transModeText:res.transMode==1?'班列':res.transMode==2?'直发':res.transMode==3?'中转':res.transMode==4?'海铁联运':'异常',
          "originPort":res.originPort,//起始港
          "origin":res.origin,//起始站
          "transferStation":res.transferStation,//中转站
          "customsStation":customsStation,//报关站
          "transitPort":transitPort,//过境口岸
          "dest":dest,//目的站
          "departPlan":res.departPlan,//发车计划
          "departTime":departTime,//最早发车时间
          "duration":duration,// 线路时长
          "lcl":res.lcl,// 是否拼箱 0 ：n ，1：y
          linePriceeEffectiveTime:res.linePriceeEffectiveTime,
          isRequiredConsign:res.isRequiredConsign
        }
        this.findLineQuotationSupport({number:this.fromData.lineNumber})
        if(!this.chart.isRequiredConsign){
          // this.findConsign(parm)
          this.getProvinceAndCity({})
        }else{
          this.checked2 = true
          this.suitcasePointsClick()
        }
        this.findLineWeightConfine({lineId:this.chart.id})
      },
      gitciytList(){
        var parm ={
          suitcasePointId: this.fromData.suitcasePointId,
          number: this.fromData.lineNumber
        }
        this.CityDate = []
        this.fromData.province = ''
        this.fromData.city = ''
        this.fromData.consignId = ''
        this.fromData.suitcasePointName = ''
        this.getProvinceAndCity(parm)
        for(let i in this.suitcasePointData){
          if(this.fromData.suitcasePointId == this.suitcasePointData[i].suitcasePointId){
            this.fromData.suitcasePointName = this.suitcasePointData[i].suitcasePointName
          }
        }
      },
      // 是否支持托运
      consignFn(res){
        this.tuoyun = res.body.data

        if(res.body.data.length<=0){
          this.tuoyunShow = true
        }else {
          this.tuoyunShow = false
        }
      },
      //创建运价单成功
      updateFn(res){
        this.$store.commit('commitLoading', {loading:false,text:''})
        if(res.data.id){
          this.openSuccess('询价单创建成功,两秒后将跳转到订单界面')
          var that = this
          setTimeout(function () {
            if(!that && !that._isDestroyed){ //_isDestroyed 组件是否被销毁
              return;
            }
            that.goChart('oderList')
          },2000)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 价格转换
      moneychange(arr,number,a,reta){
        var c = reta
        var res = arr ||{
          'R':0,
          'D':0
        }

        if(!number){
          return res
        }else {
         // number = parseFloat(number)
        }
        if(a==1){
          res.R = res.R + number;
          res.D = res.D+(number/c)
        }
        if(a!=1){
          res.D = res.D + number;
          res.R = res.R+(number*c)
        }
        res.reta = reta
        return res
      },
      // 价格过滤
      moneyFn(obj){
        var total,unit,rate,
          res={
            total:total || 0,
            unit: unit || 0,
            rate:rate || 0
          };
        if(obj){
          res.total = obj.total || 0;
          res.unit = obj.unit || 0;
          res.rate = obj.rate || 0;
        }
        return res
      },
      //询价解析
      quotationDetailFn(res){
        res = res.body.data
        if(!res){
          return
        }
        var  dataBox = res.valuationResult;
        // 外层统计===== escortFeeCount：押运费用， lineQuotationCount：线路费用， ctnQuotationCount：集装箱费用 ，consignQuotationCount：拖车费用 ， quotationCount;合计
        this.prceList = []
        var escortFeeCount , lineQuotationCount, ctnQuotationCount, consignQuotationCount,pettyPrice, quotationCount,remark=[]
        for(let i in dataBox ){
          // 详情列表
          var list = {
            escortFeeCount:0,
            lineQuotationCount:0,
            ctnQuotationCount:0,
            consignQuotationCount:0,
            quotationCount:0,
            number:dataBox[i].lineCount? dataBox[i].lineCount.number: 0,
            ctnType:dataBox[i].ctnType,
            ctnOwner: dataBox[i].ctnOwner==1?'铁路箱':'自备箱',
            escortFeeCountD:0,
            lineQuotationCountD:0,
            ctnQuotationCountD:0,
            consignQuotationCountD:0,
            quotationCountD:0,
          }
          // 计算总价
          var obj = this.moneyFn(dataBox[i].escortFeeCount);
          escortFeeCount = this.moneychange(escortFeeCount,obj.total,obj.unit,obj.rate);
          list.escortFeeCount = this.moneychange('',obj.total,obj.unit,obj.rate).R.toFixed(2) || 0;
          list.escortFeeCountD = this.moneychange('',obj.total,obj.unit,obj.rate).D.toFixed(2) || 0;
          obj = this.moneyFn(dataBox[i].lineCount)
          lineQuotationCount = this.moneychange(lineQuotationCount,obj.total,obj.unit,obj.rate);
          list.lineQuotationCount = this.moneychange('',obj.total,obj.unit,obj.rate).R.toFixed(2) || 0;
          list.lineQuotationCountD = this.moneychange('',obj.total,obj.unit,obj.rate).D.toFixed(2) || 0;
          obj = this.moneyFn(dataBox[i].ctnCount);
          ctnQuotationCount = this.moneychange(ctnQuotationCount,obj.total,obj.unit,obj.rate);
          list.ctnQuotationCount = this.moneychange('',obj.total,obj.unit,obj.rate).R.toFixed(2) || 0;
          list.ctnQuotationCountD = this.moneychange('',obj.total,obj.unit,obj.rate).D.toFixed(2) || 0;
          obj = this.moneyFn(dataBox[i].consignCount);
          consignQuotationCount = this.moneychange(consignQuotationCount, obj.total,obj.unit,obj.rate);
          list.consignQuotationCount = this.moneychange('',obj.total,obj.unit,obj.rate).R.toFixed(2) || 0;
          list.consignQuotationCountD = this.moneychange('',obj.total,obj.unit,obj.rate).D.toFixed(2) || 0;
          obj = this.moneyFn(dataBox[i].total);
          quotationCount = this.moneychange(quotationCount,obj.total,obj.unit,obj.rate);
          list.quotationCount = this.moneychange('',obj.total,obj.unit,obj.rate).R.toFixed(2) || 0;
          list.quotationCountD = this.moneychange('',obj.total,obj.unit,obj.rate).D.toFixed(2) || 0;
          if(remark.indexOf(dataBox[i].remark)<0){
            remark.push(dataBox[i].remark)
          }
          this.prceList.push(list)
        }

       var obj = this.moneyFn(res.total);
        quotationCount = this.moneychange('',obj.total,obj.unit,obj.rate);
        if(!quotationCount.R){
            this.openError('该箱型暂无具体报价！')
          }
          // 站杂费
         res.pettyPrice = this.moneyFn(res.pettyPrice);
         pettyPrice = this.moneychange('',res.pettyPrice.total,res.pettyPrice.unit,quotationCount.reta);
        this.prceChart = {
          "quotationId":1,
          "escortFeeCount":quotationCount.R ? quotationCount.R.toFixed(2) : 0,// 押运费用
          "lineQuotationCount":lineQuotationCount.R ? lineQuotationCount.R.toFixed(2) : 0,//线路运输费用
          "ctnQuotationCount":ctnQuotationCount.R ? ctnQuotationCount.R.toFixed(2) : 0,//箱总价
          "consignQuotationCount":consignQuotationCount.R ? consignQuotationCount.R.toFixed(2) : 0,//拖车总价
          "quotationCount":quotationCount.R ? quotationCount.R.toFixed(2) : 0, // 询价结果
          pettyPrice: pettyPrice.R ? pettyPrice.R.toFixed(2) : 0,
          cbm:res.cbm || 0,
          remark:remark,
          nuit:this.prceChart.nuit || '$',
          reta:quotationCount.reta,
          pettyPriceD:pettyPrice.D ? pettyPrice.D.toFixed(2) : 0,
          "escortFeeCountD":quotationCount.D ? quotationCount.D.toFixed(2) : 0,// 押运费用
          "lineQuotationCountD":lineQuotationCount.D ? lineQuotationCount.D.toFixed(2) : 0,//线路运输费用
          "ctnQuotationCountD":ctnQuotationCount.D ? ctnQuotationCount.D.toFixed(2) : 0,//箱总价
          "consignQuotationCountD":consignQuotationCount.D ? consignQuotationCount.D.toFixed(2) : 0,//拖车总价
          "quotationCountD":quotationCount.D ? quotationCount.D.toFixed(2): 0, // 询价结果
        }
      // 费用明细

      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message({
          message: text,
          type: 'error'
        })

      },
      goChart(name,id){
        this.$router.push({ name: name,query:{name:this.$route.name}})
      },
      // 支持的箱型
      supportFn(res){
        this.supportList = []
        var dat = res.body.data;
        for(let i in dat){
          if(dat[i].ctnOwner == 2){
            var pu2 = {
              "lineId":dat[i].lineId,
              "ctnOwner":dat[i].ctnOwner,
              "ctnType":dat[i].ctnType,
              maxAndMin:dat[i].maxAndMin
            }
            this.supportList.push(pu2)
            var pu = {
              "lineId":dat[i].lineId,
              "ctnOwner":3,
              "ctnType":dat[i].ctnType,
              maxAndMin:dat[i].maxAndMin
            }
            this.supportList.push(pu)
          }else {
            this.supportList.push(dat[i])
          }
        }

        if(this.supportList.length>0){
          this.maxAndMin = this.supportList[this.supportList.length-1].maxAndMin
          this.changeRadio(this.fromData.qParamRequests[0])
        }
      },
      // 箱子选择初始化
      // addDeft(){
      //   this.fromData.qParamRequests[0].ctnOwner = this.supportList[0].ctnOwner;
      //   this.fromData.qParamRequests[0].cartonType = this.supportList[0].ctnType;
      //
      //   if(this.supportList[0].ctnOwner==1) {this.changeSupport(1,0)}else if(this.supportList[0].ctnOwner==2){
      //     this.changeSupport(2,0)
      //   }else {
      //     this.changeSupport(3,0)
      //   }
      // },
      addList(index){
        //新增表单
        if(index){
          this.fromData.qParamRequests.splice(index,1);
          this.cartonType.splice(index,1);
          this.cartonTypeCheck.splice(index,1)
          this.checked.splice(index,1);
          this.fromData.checked.splice(index,1);
        } else {

          var going =true
          for (let i in this.fromData.qParamRequests){

            if(!this.fromData.qParamRequests[i].cartonType || !this.fromData.qParamRequests[i].cartonCount || !this.fromData.qParamRequests[i].weight){
              going = false
            }
          }
          if(!going){return}
          this.cartonTypeCheck.unshift({type:""})
          var pu = {
            ctnOwner: 1,//是否租箱
            cartonType: '',//箱型
            cartonCount: null,//箱量
            weight: null,//重量
            volume: null,//体积
            cartonTypeList:[
              {
                value: '20GP',
                label: '20GP',
                disabled:false,
                wet:0
              }, {
                value: '40GP',
                label: '40GP',
                disabled:false,
                wet:0
              },{
                value: '40HQ',
                label: '40HQ',
                disabled:false,
                wet:0
              }
            ]
          }
          this.fromData.qParamRequests.unshift(pu)
          this.changeRadio(this.fromData.qParamRequests[0])
          this.checked.push([{
            value: 1,
            label: '铁路箱',
            none:true
          },{
            value: 2,
            label: '自备箱',
            none:true
          },{
            value: 3,
            label: '自备箱',
            disabled: false,
            none:false
          }])
          this.fromData.checked.unshift(false)
          // 新增
          //初始化

        }
      },
      // 切换报价集装箱归属
      changeSupport(list,index){

        list.cartonType = ''
        list.volume = ''
        list.weight = ''
        for(let i in this.cartonType[index]){
          this.cartonType[index][i].disabled = false;
        }

       for(let i in this.supportList){
         // 取出对应数据源
         if(this.supportList[i].ctnOwner == list.ctnOwner ){

                 // 匹配对应箱型可选
            for(var k in this.cartonType[index]){
              if(this.supportList[i].ctnType == this.cartonType[index][k].value){
                this.cartonType[index][k].disabled = true
                // 第一个箱型 并不是拼箱
                if( i == 0 && this.chart.lcl !=1){
                  this.saechFn()
                }
              }
            }
         }
       }
       if(list.ctnOwner == 1){
         this.fromData.checked[index] = false
       }else {
         this.fromData.checked[index] = true
       }
      },
      //表单验证
      fromChcek(arry,parmChack){
         for(let i in arry){
           for(let k in arry){

               if(parmChack.key==k){


             }
           }
         }
      },
    },
    computed: {
      searchDetailda: function () {
        var parm = this.searchDetail
        if (parm) {
          if(JSON.stringify(parm) != this.last){

            this.last = JSON.stringify(parm)
          this.searchDetailFn(parm)
          }
        }
        return 1
      },
      //箱型
      consignData: function () {
        var parm = this.consign;
        if (parm) {
          this.consignFn(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus;
        if(parm){
          this.updateFn(parm)
        }
        return 1
      },
// 价格缉拿测
      quotationData: function () {
        var parm = this.quotationDetail;
        if(parm){
          if(parm.code == 'error'){
            this.prceChart={
              "quotationId":null,
                "escortFeeCount":0.00,// 押运费用
                "lineQuotationCount":0.00,//线路运输费用
                "ctnQuotationCount":0.00,//箱总价
                "consignQuotationCount":0.00,//拖车总价
                "quotationCount":0.00, // 询价结果
                "nuit":this.prceChart.nuit,
                "escortFeeCountD":  0,// 押运费用
                "lineQuotationCountD": 0,//线路运输费用
                "ctnQuotationCountD": 0,//箱总价
                "consignQuotationCountD": 0,//拖车总价
                "quotationCountD": 0, // 询价结果
            }
            return 1
          }
          if(parm.body.status==0){
            this.quotationDetailFn(parm)
          }
        }
        return 1
      },
 // 查看支持的箱型
      supportData(){
        var parm = this.support
        if (parm) {
          if(!this.supportFalse){
            this.supportFn(parm)
            this.supportFalse = true;
          }
        }
        return 1
      },
      // 查看支持拖车城市
      provinceAndCitData(){
        var parm = this.provinceAndCity

        return parm ? parm.body.data:[]
      },
      // 查看支持拖车城市
      weight(){
        var parm = this.weightConfing
       if(parm){
         parm = parm.body.data

         if(parm.length>0){
           for(let i in this.fromData.qParamRequests){
             for(let k in this.fromData.qParamRequests[i].cartonTypeList){
               for(let s in parm){
                 if(this.fromData.qParamRequests[i].cartonTypeList[k].value == parm[s].cartonType){
                   this.fromData.qParamRequests[i].cartonTypeList[k].wet = parm[s].weightMax
                 }
               }
             }
             //this.maxWweight = parm.body.data
           }
           this.$store.commit('commitWeightConfine',null)
         }
       }
        return 1
      },
      suitcasePointData(){
        var parm = this.stateSuitcasePoint || {body:{data:[]}}
        return parm.body.data
      },
      ...mapState([
        'searchDetail',
        'updateStatus',
        'language',
        'consign',
        'quotationDetail',
        'support',
        'provinceAndCity',
        'weightConfing',
        'stateSuitcasePoint'
      ])
    },
    mounted () {
      window.scrollTo(0,0)
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

